<template>
    <div>
        <ul v-if="loading">
          <li v-for="(val,key,index) in info" :key="index">
            <span>{{key}}:{{val}}</span>
          </li>
        </ul>
        <img v-else  width="100" src="./img/loading.gif">
    </div>
</template>

<script>
  //死数据 照理应该在数据库中
  const detailList = [
    {id:0,title:"1号瓜",msg:"damu 和 周冬雨 结婚了"},
    {id:1,title:"2号瓜",msg:"damu 和 周冬雨 生娃了"},
    {id:2,title:"3号瓜",msg:"damu 和 周冬雨 又生娃了"}
  ]
    export default {
        name: "MessageDetail",
        props:["id"],
        data(){
          return {
            info:{},
            loading:false
          }
        },
        watch:{
          $route:{
            handler(){
              this.loading = false
              //根据id 去请求新闻的详细信息
              setTimeout(()=>{
                this.info = detailList.filter(item=>item.id === +this.id)[0]
                this.loading = true
              },2000)
            },
            deep:true,
            immediate:true
          }
        }
    }
</script>

<style scoped>

</style>
